<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Camera Example</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
            
        <!-- 引入组件 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
        <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
        <script src="../js/ajax.js"></script>
    </head>
    <body>
        <div id="app">
            <van-row>
                <van-col span="6">
                    <van-badge-group :active-key="activeKey" @change="onChange" >
                      <van-badge @click="change(item)" :title="item.Name" v-for="item in Categories">
                          
                      </van-badge>
                    </van-badge-group>
                </van-col>
                <van-col span="18">
                    <van-col span="12" v-for="item in products">
                        <div style="width: 100%;">
                            <img v-lazy="item.GoodsImageUrl" style="width: 100%;" alt="">
                        </div>
                        <div>
                            {{item.Name}}
                        </div>
                    </van-col>
                </van-col>
            </van-row>
        </div>
        <script type="text/javascript">
            Vue.use(VueLazyload, {
                error:"../img/b3.jpg"
            });
        	var vm = new Vue({
        		el:"#app",
                data:{
                    activeKey:1,
                    Categories:[],
                    products:[]
                },
                methods:{
                    onChange:function(key){
                        this.activeKey = key;
                    },
                    change:function(item){
                        this.getProduct(this.Categories[this.activeKey].Id)
                    },
                    getCategories:function(){						
                        var _this= this;
                        ajax({
                            url:"http://dsapi.ysd3g.com/api/Categories",
                            dataType:"jsonp",
                            success:function(res){
								console.log(res)
                               _this.Categories = res.Categories;
                               _this.getProduct(_this.Categories[_this.activeKey].Id)
                            }
                        })
                    },
                    getProduct:function(id){
                        var _this = this;
                        ajax({
                            url:"http://dsapi.ysd3g.com/api/GoodsByCategoryId",
                            dataType:"jsonp",
                            data:{
                              typeId:id, 
                              p:1  
                            },
                            success:function(res){
                                _this.products = res.Data;
								console.log(res)
                            }
                        })
                    }
                },
                created() {
                	this.getCategories();
                }
        	})
        </script>
    </body>
</html>
